import React from "react";
import { NavBar, Button, Grid } from "react-vant";
import { ShopO, LabelO } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
  const m = new Date().getMonth() + 1;
  const price = 4444.0;
  const navigate = useNavigate();
  const list = [
    {
      icon: <ShopO />,
      title: "花呗金",
    },
    {
      icon: <ShopO />,
      title: "花呗金",
    },
    {
      icon: <LabelO></LabelO>,
      title: "周报",
      onClick: () => navigate("/pay/table"),
    },
    {
      icon: <ShopO />,
      title: "花呗金",
    },
    {
      icon: <ShopO />,
      title: "花呗金",
    },
    {
      icon: <ShopO />,
      title: "花呗金",
    },
    {
      icon: <ShopO />,
      title: "花呗金",
    },
    {
      icon: <ShopO />,
      title: "花呗金",
    },
  ];
  return (
    <div>
      <NavBar title="花呗"></NavBar>
      <div className="pay-middle">
        <div>{m}月份账号</div>
        <div>{price}元</div>
        <div>
          <Button type="primary" onClick={() => navigate("/pay/detail")}>
            立即付款
          </Button>
        </div>
      </div>
      <div style={{ marginTop: 10 }}>
        <Grid square>
          {list.map((v, i) => {
            return (
              <Grid.Item
                onClick={v.onClick}
                icon={v.icon}
                key={i}
                text={v.title}
              ></Grid.Item>
            );
          })}
        </Grid>
      </div>
    </div>
  );
};

export default Index;
